
<template>
<div>
	<div>
		<group v-if="!custSql&&conditions&&conditions.length>0">
			<div class="bbig" v-if='lx'>
			<!-- <ab-cust-dialog-show-list v-if="dialog.style=='list'&&show" :dialog="dialog" :initData="initData" :param="queryParam" :initParam="initParam"> </ab-cust-dialog-show-list>
			<ab-cust-dialog-show-tree v-if="dialog.style=='tree'&&show" :dialog="dialog" :initData="initData" :param="queryParam" :initParam="initParam"> </ab-cust-dialog-show-tree> -->
			<!-- <div class="big">
				网点所在省份：
              <select class="select" v-model="selectedProvinces" @change="onProvincesSelected">
      <option value="">请选择</option>
      <option v-for="(province,index) in provincess" :value="province.name" :key="index">{{ province.name }}</option>
    </select>
			</div> -->
			<div class="big">
				<span>
                  网点所在城市：
				</span>
				
              <select class="select" v-model="selectedProvince" @change="onProvinceSelected">
      <option value="">请选择</option>
      <option v-for="(city,index) in provinces" :value="city.name" :key="index">{{ city.name }}</option>
    </select>
			</div>
	
        <div class="big">
			网点所在区域：
			 <select class="select" v-model="selectedCity" @change="getCode">
      <option value="">请选择</option>
      <option v-for="(area,index) in city" :value="area.name" :key="index">{{ area.name }}</option>
    </select>
		</div>
			</div>
			<!-- <flexbox v-else :gutter="0">
		      	<flexbox-item span="120">
					<selector v-model="condition" :options="conditions" placeholder="条件"></selector>
				</flexbox-item>
		      	<flexbox-item>
					<x-input v-model="findInput"  placeholder="请输入" @on-enter="find"></x-input>
		      	</flexbox-item>
	    	</flexbox> -->
	    </group>
		<group v-if="custSql&&conditions&&conditions.length>0">
			<flexbox :gutter="0" v-for="(item,index) in conditions" :key="index">
		      	<flexbox-item span="120" class="t-a-c">
					{{item.desc}}
				</flexbox-item>
		      	<flexbox-item >
		      		<ab-search-input :condition.sync="item"></ab-search-input>
		      	</flexbox-item>
	    	</flexbox>
	    	<flexbox :gutter="12" >
		      	<flexbox-item >
					 <x-button type="primary" @click.native="find()">搜索</x-button>
				</flexbox-item>
		      	<flexbox-item >
		      		<x-button type="default" @click.native="reset()">重置</x-button>
		      	</flexbox-item>
		   	</flexbox>
	    </group>
	</div>
	<div v-if="state" :class="{'o-x-s':scrollX}">
		<scroller :no-data-text="noDataText" :on-refresh="refresh" :on-infinite="infinite" ref="listScroller" :height="height ? height : heightTemp" :style="scrollerStyle" :class="{ib:scrollX}">
			<div  :class="{ib:scrollX}">
				<slot :rows="rows"></slot>
			</div>
			
		</scroller>
	</div>
		<div class="centerBox2" v-else>
         <div>提示：</div>
		 <div>请选择网点所在城市及网点所在区县进行意向网点查询</div>
		</div>
</div>
</template>

<script>
import Vue from 'vue';
import VueScroller from 'vue-scroller';
Vue.use(VueScroller);
import { XInput } from 'vux';
Vue.component('x-input', XInput);
import { Group } from 'vux';
Vue.component('group', Group);
import { Flexbox, FlexboxItem } from 'vux';
Vue.component('flexbox', Flexbox);
Vue.component('flexbox-item', FlexboxItem);
import { Selector } from 'vux';
Vue.component('selector', Selector);
import abSearchInput from './abSearchInput';

Vue.component('abSearchInput', abSearchInput);
/**
 * ab项目基于vue-scroller的上拉刷新，和下拉加载更多组件
 * 注意组件的作用域中的rows是数组列表
 * props请看代码中的描述
 * slot-scope在卡槽中直接使用组件中的作用域！
 * eg:
 * <ab-scroller url="/bpm/my/todoTaskList">
 *     <div slot-scope="slotScope">
 *        <cell v-for="task in slotScope.rows" :title="task.name" after-title="超管" :link="{path:'/bpm/complateTask',query:{taskId: task.id}}" :inline-desc="task.subject"></cell>
 *     </div>
 * </ab-scroller>
 *
 */
export default {
	//url:数组请求url;pageSize:分页大小;scorller的高度 默认80%;list的数组赋值;
	//marginTop:由于scroller组件的bug，其无法计算出离顶部的距离，目前组件会默认进行x-header的50px
 	//conditions:条件字段 eg:[{key:"name_^VLK",value:"名字"},{key:"subject_^VLK",value:"标题"}]
	props:["url","pageSize","height","list","marginTop","conditions","custSql","params","noDataText","scrollX","scrollObj","listCallback","top",'lx'],
	data: function () {
	  return {
		state:false,
		activeIndex:-1,
		selectedProvinces:'',
		selectedProvince: '',
        selectedCity: '',
	//   provincess:[],
      provinces: [],
	  city:[],
		rows :[],//列表数据
		pageResult :null,//当前页结果
	  	heightTemp:"80%",
	  	condition:"",
	  	findInput:"",
	  	scrollerStyle:{},
	  	loading : false,
	  }
	},
	mounted : function(){
    //   this.baseService
    //     .postForm(this.__ctx + "/form/formCustDialog/queryListData_ssqb").then((data) => {
    //       this.provincess = data.rows
		
    //     });
	 this.baseService
        .postForm(this.__ctx + "/form/formCustDialog/queryListData_sb ",{parentId: '520000'}).then((data) => {
          this.provinces = data.rows
		
        });
		// 设置高度
		// if(this.height){
		// 	this.heightTemp = '64%'
		// }

		//设置列表
		if(this.list){
			this.rows=this.list;
		}

		//初始化查询列表
		// this.search(0,this.pageSize);

		//计算距离顶部的高度
		var marginTop = this.marginTop?parseInt(this.marginTop):50;
		if(this.conditions&&this.conditions.length>0){
			if(!this.custSql){
				this.condition = this.conditions[0].key;//设置默认查询条件
				marginTop+=60;
			}else{
				marginTop=50*this.conditions.length + 60;
			}
			if(this.custSql){
				marginTop  = marginTop + 50;
			}
		}
    if(this.top) {
      marginTop += this.top
    }

		this.scrollerStyle["top"] = 133 + "px";
	},
	methods: {
		// onProvincesSelected(){
        // this.selectedCity = ''
		// this. selectedProvince =  ''
		// this.provinces = []
		// this.city = []
		// },
		 onProvinceSelected() {
          this.selectedCity = '';
		  this.city = []
		   const cfaId = this.provinces.find(item => item.name == this.selectedProvince ).id
		    this.baseService
        .postForm(this.__ctx + "/form/formCustDialog/queryListData_xb ",{parentId: cfaId}).then((data) => {
          this.city = data.rows
		
        });
		
    },
	getCode(){
		 const yzcode = this.city.find(item => item.name == this.selectedCity).id
        // this.$emit('getCode',yzcode)
		
		this.search(yzcode)
		 this.find()
		
	},
		//上拉刷新
		refresh(done) {
			console.info("refresh");
			this.rows.splice(0);//置空数组
			this.search(0,this.pageSize,function(){
				done();
			});
		},
		//下拉加载
	    infinite(done) {
			console.info("infinite");
			if(this.pageResult){//数据加载好了
				if(!this.pageResult.hasNextPage){//无下一页
					this.$refs.listScroller.finishInfinite(true);//通知组件到尾部了
					return;
				}
				if(this.pageResult.hasNextPage){//有下一页，加载下一页数据
					this.search(this.rows.length,this.pageSize,function(){
						done();
					});
					return;
				}
			}
	      	done();
	    },
	    //获取页面数据
	    search(code){
			
	    	var that = this;
	    	var url = '/group/queryByAreaCode';
	    	if(!url || this.loading){//为空时不处理
	    		return;
	    	}
	    	if(url.indexOf(Vue.__ctx)!==0){
	    		url = Vue.__ctx + url;
	    	}
            
	    	var param = {
				areaCode:code
			};

	    	// 支持动态穿参
	    	// if(this.params){
	    	// 	for(var key in this.params){
			// 		if(this.params[key]){
			// 			param[key] = this.params[key];
			// 		}
	    	// 	}
			// }


			// if(this.custSql){
			// 	return this.searchCustSql(offset,limit,callback);
			// }

			this.loading = true;
          this.$vux.loading.show({
            text: '加载中...'
      })
			var post = null;
			// param[this.condition] = this.findInput;
			post = Vue.baseService.postForm(url,param);
			post.then(function(data){
             that.$vux.loading.hide()
				that.loading = false;
				// if(data.isOk === false){
				// 	Vue.tools.toast(data.msg);
				// 	console.error(data);
				// 	return;
				// }

				// that.pageResult = {};
				
                // if (that.lx) {
					// that.pageResult.hasNextPage = data.total > (offset + data.length);
					data.forEach(function(item,index){
					that.rows.push(item);
				});
				
			
				// }else{
				// 	that.pageResult.hasNextPage = data.total > (offset + data.rows.length);
                //     data.rows.forEach(function(item,index){
				// 	that.rows.push(item);
				// });
				// }
				
				// if(callback){
				// 	callback(data);
				// }
			});
      post.catch(err => {
        that.$vux.loading.hide()
      })
		},
		searchCustSql : function(offset,limit,callback){
	    	var that = this;
	    	var url = this.url;
	    	var param = {
				curPage:((offset/limit)+1) || 1,
				pageSize:limit?limit:10
			};

	    	// 支持动态穿参
	    	if(this.params){
	    		for(var key in this.params){
					if(this.params[key]){
						param[key] = this.params[key];
					}
	    		}
			}

	    	if(this.conditions.length>0){
				var params = {
					queryData:[]
				};

				for(var i = 0 ; i < this.conditions.length ; i++){
					var cont = this.conditions[i];
					params.queryData.push({
						name : cont.name,
						con : cont.cntype,
						val : cont.val,
					});

					if(cont.betweenCondition ){
						params.queryData.push({
							name : cont.name,
							con : cont.betweenCondition.cntype,
							val : cont.betweenCondition.val,
						});
					}
				}

				param.params = JSON.stringify(params);

			}

	    	this.loading = true;
			var post = Vue.baseService.post(url,param);

			post.then(function(data){
				that.loading = false;
				if(data.isOk === false){
					Vue.tools.toast(data.msg);
					console.error(data);
					return;
				}

				that.pageResult = {};
				that.pageResult.hasNextPage = data.data.count > (offset + (data.data.list ? data.data.list.length : 0));

				data.data.list.forEach(function(item,index){
					that.rows.push(item);
				});
				if(callback){
					callback(data);
				}
				that.listCallback&&that.listCallback(data.data);
			});
		},
	    find : function(){
	    	var that = this;
	    	this.rows.splice(0);//置空数组
	    	if(this.custSql){
	    		this.searchCustSql(0,this.pageSize);
	    	}else{
				this.search(0,that.pageSize,function(){
					if(!that.pageResult.hasNextPage){//无下一页
						that.$refs.listScroller.finishInfinite(true);//通知组件到尾部了
					}
				});
	    	}
	    },
	    reset :function(){
	    	this.conditions.forEach((condition)=>{
	    		condition.val = "";
	    		condition.text = "";

	    		if(condition.betweenCondition){
	    			condition.betweenCondition.val="";
	    		}

	    	})

	    	this.find();
	    }
	},
	watch : {
		//监听url，当url不为空时则查一次
		url : function(newVal,oldVal){
			if(!newVal||newVal===oldVal){
				return;
			}
			// this.search(0,this.pageSize);
		},
		 'selectedCity'(oldVal,newVal){
		
		if (oldVal) {
			this.state = true
			
		}else{
			
			this.state = false
		}
	  }
    // height(val,oldVal) {
    //   if(val != oldVal) {
    //     this.$refs.listScroller.style.height = `calc(${val}px)`
    //   }
    // }
	}

}

</script>

<style lang='less'>
.big{
	font-size: 14px;
	margin-top: 7px;
}

/deep/ .pull-to-refresh-layer{
    width: 100%;
    height: 85px  !important;
    margin-top: -60px;
    text-align: center;
    font-size: 16px;
    color: #aaa;
}
select{
	width: 70%;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 8px;
  color: #333;
  font-size: 14px;
  font-family: Arial, sans-serif;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.centerBox2{
	width: 80%;
	height: 40px;
	margin: 40px auto;
   
}
.vux-no-group-title .vux-x-input.weui-cell{
	padding: 0;
}
.card-padding {
	padding: 15px;
}
/deep/._v-container{
	top: 133px;
    width: 100%;
    height: 64%;
}
</style>
